<template>
<div>
  <!--  面包屑-->
  <el-breadcrumb separator-class="el-icon-arrow-right">
    <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item>商品管理</el-breadcrumb-item>
    <el-breadcrumb-item>参数列表</el-breadcrumb-item>
  </el-breadcrumb>
<!--  卡片-->
  <el-card>
<!--警告-->
    <el-alert title="注意:只允许为三级分类设置参数" type="warning" show-icon :closable="false"></el-alert>

<!--    选择商品分类参数-->
    <el-row class="cat_opt">
      <el-col>
        <span>选择商品分类：</span>
<!--        选择商品分类联级选择框-->
        <el-cascader v-model="cateListKeys" :options="cateList" :props="paraConfiguration" @change="handleChange"></el-cascader>
      </el-col>
    </el-row>

<!--    页签区域-->
    <el-tabs v-model="activeName" @tab-click="tabshandleClick">
      <el-tab-pane label="动态参数" name="many">
        <el-button type="primary" size="mini" :disabled="isBtnDisabled" @click="addDialogVisible=true">添加参数</el-button>
        <!--      动态参数列表-->
        <el-table :data="mangTableData" border stripe>
          <!--        下拉框-->
          <el-table-column type="expand"></el-table-column>
          <!--        索引列-->
          <el-table-column type="index" label="#"></el-table-column>
          <!--        参数列-->
          <el-table-column label="参数名称" prop="attr_name"></el-table-column>
          <el-table-column label="操作">
            <!--          按钮-->
            <template slot-scope="scope">
              <el-button type="primary" size="mini" icon="el-icon-edit">编辑</el-button>
              <el-button type="danger" size="mini" icon="el-icon-delete" @click="removeParams(scope.row,attr_id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="静态属性" name="only">
        <el-button type="primary" size="mini" :disabled="isBtnDisabled" @click="addDialogVisible=true">添加属性</el-button>
        <!--      静态参数列表-->
        <el-table :data="onlyTableData" border stripe>
          <!--        下拉框-->
          <el-table-column type="expand"></el-table-column>
          <!--        索引列-->
          <el-table-column type="index" label="#"></el-table-column>
          <!--        参数列-->
          <el-table-column label="属性名称" prop="attr_name"></el-table-column>
          <el-table-column label="操作">
            <!--          按钮-->
            <template slot-scope="scope">
              <el-button type="primary" size="mini" icon="el-icon-edit">编辑</el-button>
              <el-button type="danger" size="mini" icon="el-icon-delete" @click="removeParams(scope.row,attr_id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>

    </el-tabs>
  </el-card>
  <!--    添加参数对话框-->
  <el-dialog :title="'添加'+titleText" :visible.sync="addDialogVisible" width="50%" @close="addDialogClose">
    <!--      添加参数表单-->
    <el-form :model="ruleForm" :rules="ruleFormRules" ref="addFormRef" label-width="100px" class="demo-ruleForm" >
      <el-form-item :label="titleText" prop="attr_name">
        <el-input v-model="ruleForm.attr_name"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
    <el-button @click="addDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="addParams">确 定</el-button>
  </span>
  </el-dialog>
</div>
</template>

<script>
export default {
name: "Params",
  created() {
    this.getCateList();
  },
  data() {
    return {
      //商品分类列表数据
      cateList: [],
    //  存储下拉框变化后的id
      cateListKeys:[],
    //  peops绑定的数据
      paraConfiguration:{
        expandTrigger: 'hover',
        value:'cat_id',
        label:'cat_name',
        children:'children'
      },
    //  页签绑定的数据
      activeName:"many",
    //  动态参数的数据
      mangTableData:[],
    //  静态属性的数据
      onlyTableData:[],
    //  控制添加参数对话框的显示和隐藏
      addDialogVisible:false,
    //  添加参数表单
      ruleForm:{},
    //表单验证规则
      ruleFormRules:{
        attr_name:[
            { required: true, message: '请输入名称', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    //获取商品列表分类数据
    async getCateList() {
      const {data:res} = await this.$http.get("categories");
      if (res.meta.status!==200) return this.$message.error("获取商品参数列表错误");
      this.cateList = res.data;
    },
  //  监听级联转态的改变
    handleChange(){
      this.getParamsData();
    },
  //  监听页签状态的变化
    tabshandleClick(){
      this.getParamsData()
    },
  //  获取参数列表数据
    async getParamsData(){
      //如果不是三级分类直接清空
      if (this.cateListKeys.length !== 3){
        this.cateListKeys = [];
        return ;
      }
      //  证明是三级分类
      const {data:res}= await this.$http.get(`categories/${this.cateId}/attributes`,{params:{sel:this.activeName}});
      if (res.meta.status!==200) return this.$message.error("获取数据错误");

    //  判断是哪个属性
      if (this.activeName === 'many'){
        this.mangTableData = res.data;
      }else{
        this.onlyTableData = res.data;
      }
    },
  //  监听对话框关闭事件
    addDialogClose(){
      this.$refs.addFormRef.resetFields();
    },
  //  点击按钮 添加参数
    addParams(){
      this.$refs.addFormRef.validate(async vali=>{
        if (!vali) return
        const {data:res} = await this.$http.post(`categories/${this.cateId}/attributes`,{
          //传入要添加的参数
          attr_sel:this.activeName,
          attr_name:this.ruleForm.attr_name
        });
        if(res.meta.status!==201) return this.$message.error("添加参数失败");
        this.$message.success("添加参数成功");
        this.addDialogVisible = false;
      //  重新获取数据
        this.getParamsData()
      })
    },
    //点击按钮删除
    async removeParams(attr_id){
      const config =  await this.$confirm('此操作将永久删除该参数, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err=>err);
      if (config!=='confirm'){
        this.$message.error("用户取消了删除");
      }
      const {data:res} = await this.$http.delete(`categories/${this.cateId}/attributes/${attr_id}`);
      if (res.meta.status!==200){
        this.$message.error("删除失败");
      }
      this.$message.success("删除成功");
      this.getParamsData();
    }
  },
  computed:{
    isBtnDisabled(){
      if (this.cateListKeys.length!==3) return true;
      return false;
    },
    //当前选中的三级分类的id
    cateId(){
      //如果长度等于3 直接返回数组的最后一个
      if (this.cateListKeys.length === 3) return this.cateListKeys[2];
    },
  //  对话框的动态字符
    titleText(){
      if (this.activeName==='many'){
          return "动态参数"
      }else{
        return "静态参数"
      }
    }
  }
}
</script>

<style leng="less" scoped>
.cat_opt{
  margin: 15px 0px;
}
</style>